<template>
  <div>
    <div>
      <el-checkbox v-model="toggleExpand" @change="toggleExpandEvents">展开/关闭</el-checkbox>
      <el-checkbox v-model="isAllSelected" @change="toggleIsAllSelected">全选/反选</el-checkbox>

    </div>
    <el-tree
      ref="tree"
      :data="list"
      show-checkbox
      :default-checked-keys="defaultCheckedKeys"
      node-key="id"
      :props="{label:'title'}"
      @check="checkEvents"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
      @check-change="checkChange"
    />
    <el-button type="primary" size="default" @click="confirm">确定</el-button>

  </div>
</template>

<script>
import {
  findAllPermissions,
  saveRolePermissions
} from '@/api/auth/roles'
export default {
  data() {
    return {
      list: [],
      isAllSelected: false, // 全选反选
      toggleExpand: false, // 展开关闭
      defaultCheckedKeys: [], // defaultCheckedKeys 设置选中的树节点的id
      ids: [], // 保存的所以的id项组成的数组
      selectedIds: [] // 当前选中的id项组成的数据
    }
  },
  computed: {

  },
  watch: {
    // isAllSelected(newVal) {
    //   // newVal ? this.defaultCheckedKeys = this.ids : this.defaultCheckedKeys = []
    //   newVal ? this.$refs.tree.setCheckedKeys(this.ids) : this.$refs.tree.setCheckedKeys([])
    // }
  },
  created() {
    findAllPermissions()
      .then(res => {
        this.list = res.data.menus
        this.filterIds(res.data.menus, this.ids) // res.data.menus 递归的数据  this.ids 容器 用于保存所以的id
      })
  },
  mounted() {
    console.log(this.$refs.tree)
  },
  methods: {
    checkChange(val) { // 选中状态改变之后触发的事件
      // console.log(Object.values(this.$refs.tree.store.nodesMap))
      var arr = []
      // setTimeout(() => {
      //   for (var i in this.$refs.tree.store.nodesMap) {
      //     // console.log(this.$refs.tree.store.nodesMap[i])

      //     if (this.$refs.tree.store.nodesMap[i].checked) {
      //       arr.push(i)
      //     }
      //   }
      //   console.log(arr, arr.length)
      //   this.selectedIds = arr
      // }, 0)
      console.log(this.$refs.tree.getCheckedKeys())
      this.selectedIds = this.$refs.tree.getCheckedKeys()
    },
    confirm() {
      saveRolePermissions({
        'createTime': '',
        'id': '',
        'isDeleted': '',
        'modifyTime': '',
        'permissionIds': this.selectedIds,
        'remark': '管理员角色，拥有最高权限',
        'roleCode': '1231',
        'roleName': '管理员'
      })
    },
    nodeExpand() {
      console.log('节点展开')
      this.toggleExpandStatus()
    },
    nodeCollapse() {
      console.log('节点关闭')
      this.toggleExpandStatus()
    },
    toggleExpandStatus() {
      // 展开/关闭 的是否选中
      // 仅当同步异步走完之后 才执行的setTimeout
      setTimeout(() => {
        this.toggleExpand = Object.values(this.$refs.tree.store.nodesMap).every(ele => ele.expanded)
      }, 0)
    },
    toggleExpandEvents() {
      console.log(Object.values(this.$refs.tree.store.nodesMap))
      Object.values(this.$refs.tree.store.nodesMap).forEach(ele => {
        ele.expanded = this.toggleExpand
      })
      // this.toggleExpand ? this.$refs.tree.store.nodesMap
    },
    toggleIsAllSelected() {
      this.isAllSelected ? this.$refs.tree.setCheckedKeys(this.ids) : this.$refs.tree.setCheckedKeys([])
    },
    checkEvents(val, val1) { // tree组件复选框点击的时候执行的事件
      this.isAllSelected = val1.checkedKeys.length == this.ids.length
    },
    filterIds(arr, ids) { // 递归处理数据  拿到所有的id
      if (!Array.isArray(arr)) {
        return
      }
      arr.forEach(ele => {
        ids.push(ele.id)
        if (ele.children) {
          this.filterIds(ele.children, ids)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
